<template>
  <div class="filter">
    <t-drawer
      size="695px"
      :visible.sync="visible"
      :closeBtn="false"
      :close-on-overlay-click="false"
    >
      <template #header>
        <div class="drawer-head" @click="close">
          <p class="chevron-left">
            <icon-font name="chevron-left" size="18px" />
          </p>
          <h3>{{header}}</h3>
        </div>
      </template>
      <template #footer>
        <div>
          <!--<t-button v-if="current !== 1" theme="default" @click="previous">上一步</t-button>-->
          <!--<t-button v-if="current !== tabs.length" theme="primary" @click="next">下一步</t-button>-->
          <t-button :theme="confirmBtn.theme" :loading="confirmBtn.loading" @click="submit">
            {{ confirmBtn.text }}</t-button>
        </div>
      </template>
      <div v-if="visible" class="product-add">
        <tab-list :current="current" :tabs="tabs" @change="changeTab"></tab-list>
        <!-- 基础信息 -->
        <base-info v-show="current === 1" ref="base"></base-info>
        <!-- 产品库存 -->
        <product-count v-show="current === 2" ref="count"></product-count>
        <!-- 产品图片 -->
        <product-images v-show="current === 3" ref="images"></product-images>
        <!-- 产品详情 -->
        <product-detail v-show="current === 4" ref="detail"></product-detail>
        <!-- 产品清单 -->
        <product-inventory v-show="current === 5" ref="inventory"></product-inventory>
        <!-- 关联产品 -->
        <related-products v-show="current === 6" ref="related" @addProduct="addProduct"></related-products>
        <!-- 营销设置 -->
        <marketing-settings v-show="current === 7" ref="marketing"></marketing-settings>
        <!-- 分享设置 -->
        <share-setting v-show="current === 8" ref="share"></share-setting>
        <!-- 附加内容 -->
        <additional-content v-show="current === 9" ref="additional"></additional-content>
      </div>
    </t-drawer>


    <product-list ref="list" @confirm="confirmProduct"></product-list>
  </div>
</template>

<script>
import { IconFont } from "tdesign-icons-vue";
import TabList from "@/pages/product/list/batch-settings/components/tab-list.vue";
import BaseInfo from "@/pages/product/list/batch-settings/components/base-info.vue";
import ProductInventory from "@/pages/product/list/batch-settings/components/product-inventory.vue";
import ProductCount from "@/pages/product/list/batch-settings/components/product-count.vue";
import ProductImages from "@/pages/product/list/batch-settings/components/product-images.vue";
import ProductDetail from "@/pages/product/list/batch-settings/components/product-detail.vue";
import RelatedProducts from "@/pages/product/list/batch-settings/components/related-products.vue";
import ShareSetting from "@/pages/product/list/batch-settings/components/share-setting.vue";
import MarketingSettings from "@/pages/product/list/batch-settings/components/marketing-settings.vue";
import AdditionalContent from "@/pages/product/list/batch-settings/components/additional-content.vue";
import {productCreateApi, productDetailApi, productEditApi} from "@/api/product";
import ProductList from "@/components/product-list/index.vue";

export default {
  name: 'BatchSettings',
  components: {
    ProductList,
    AdditionalContent,
    MarketingSettings, RelatedProducts, IconFont, ProductDetail, ShareSetting, ProductImages, ProductInventory, ProductCount, BaseInfo, TabList},
  data() {
    return {
      visible: false,
      header: '批量设置',
      current: 1,
      tabs: [
        {label: '基本信息', value: 1},
        {label: '金额/库存', value: 2},
        //{label: '产品图片', value: 3},
        {label: '产品详情', value: 4},
        {label: '产品清单', value: 5},
        //{label: '关联产品', value: 6},
        {label: '营销设置', value: 7},
        {label: '分享设置', value: 8},
        {label: '附加内容', value: 9},
      ],
      confirmBtn: {
        text: '保存',
        theme: 'primary',
        loading: false
      },
      editId: '',
      type: 'add',
      ids: []
    }
  },
  methods: {
    addProduct() {
      this.$refs.list.open()
    },
    confirmProduct(list) {
      //this.$refs.related.formData.relation_data = list
    },
    // 切换tab
    changeTab(value) {
      this.current = value
    },
    // 上一步
    previous() {
      this.current --
    },
    // 下一步
    next() {
      this.current ++
    },
    // 提交
    async submit() {
      const base = await this.$refs.base.submit();
      const count = await this.$refs.count.submit();
      //const images = await this.$refs.images.submit();
      const detail = await this.$refs.detail.submit();
      const inventory = await this.$refs.inventory.submit();
      //const related = await this.$refs.related.submit();
      const marketing = await this.$refs.marketing.submit();
      const share = await this.$refs.share.submit();
      const additional = await this.$refs.additional.submit();
      // 对象合并
      const valid = Object.assign({}, base, count, detail, inventory, marketing, share, additional);
      // 判断是否验证通过
      if (!Object.keys(valid).length) {
        this.handleSubmit()
      } else {
        this.$message.error('请完善信息')
        if (Object.keys(base).length) {
          this.current = 1
        } else if (Object.keys(count).length) {
          this.current = 2
          //} else if (Object.keys(images).length) {
          //  this.current = 3
        } else if (Object.keys(detail).length) {
          this.current = 4
        } else if (Object.keys(inventory).length) {
          this.current = 5
          //} else if (Object.keys(related).length) {
          //  this.current = 6
        } else if (Object.keys(marketing).length) {
          this.current = 7
        } else if (Object.keys(share).length) {
          this.current = 8
        } else if (Object.keys(additional).length) {
          this.current = 9
        }
      }
    },
    handleSubmit() {
      const base = this.$refs.base.formData;
      const count = this.$refs.count.formData;
      //const images = this.$refs.images.formData;
      const detail = this.$refs.detail.formData;
      const inventory = this.$refs.inventory.formData;
      //const related = this.$refs.related.formData;
      const marketing = this.$refs.marketing.formData;
      const share = this.$refs.share.formData;
      const additional = this.$refs.additional.formData;
      // 对象合并
      const params = Object.assign({}, base, count, detail, inventory, marketing, share, additional);
      this.confirmBtn.loading = true
      this.confirmBtn.text = '保存中'
      //params.images_data = JSON.stringify(params.images_data)
      params.label_data = JSON.stringify(params.label_data)
      params.params_data = JSON.stringify(params.params_data)
      params.relation_data = JSON.stringify(params.relation_data)
      params.deliver_data = params.deliver_data.join(',')
      params.safeguard_data = params.safeguard_data.join(',')
      params.id = this.ids.join(',')
      productEditApi(params).then(res=> {
        this.$message.success(res.retmsg)
        this.$emit('refresh')
        this.close()
      }).catch(err=> {
        console.log('err', err)
      }).finally(()=> {
        this.confirmBtn.loading = false
        this.confirmBtn.text = '保存'
      })
    },
    open(type, ids=[]) {
      this.current = 1
      this.ids = ids
      this.visible = true
    },
    close() {
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>

/deep/ .t-drawer__body {
  padding-top: 0;
}
</style>
